<template>
  <div class="dashboard-container">
    <el-row :gutter="24">
      <!-- 满意度分布 -->
      <el-col :span="12">
        <el-card
            shadow="hover"
            :border="false"
            class="custom-card"
        >
          <h3 class="chart-title">满意度分布</h3>
          <p class="chart-subtitle">用户对对话质量的满意度评分分布</p>
          <div ref="satisfactionBarRef" class="chart" />
        </el-card>
      </el-col>
      <!-- 有效性分布 -->
      <el-col :span="12">
        <el-card
            shadow="hover"
            :border="false"
            class="custom-card"
        >
          <h3 class="chart-title">有效性分布</h3>
          <p class="chart-subtitle">对话解决问题的有效性评分分布</p>
          <div ref="effectivenessBarRef" class="chart" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin-top: 24px;">
      <!-- 质量趋势分析 -->
      <el-col :span="24">
        <el-card
            shadow="hover"
            :border="false"
            class="custom-card"
        >
          <h3 class="chart-title">质量趋势分析</h3>
          <p class="chart-subtitle">近几个月满意度和有效性的趋势变化</p>
          <div ref="trendLineRef" class="chart" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin-top: 24px;">
      <!-- 满意度占比 -->
      <el-col :span="12">
        <el-card
            shadow="hover"
            :border="false"
            class="custom-card"
        >
          <h3 class="chart-title">满意度占比</h3>
          <div ref="satisfactionPieRef" class="chart" />
        </el-card>
      </el-col>
      <!-- 有效性占比 -->
      <el-col :span="12">
        <el-card
            shadow="hover"
            :border="false"
            class="custom-card"
        >
          <h3 class="chart-title">有效性占比</h3>
          <div ref="effectivenessPieRef" class="chart" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 图表容器引用
const satisfactionBarRef = ref(null);
const effectivenessBarRef = ref(null);
const trendLineRef = ref(null);
const satisfactionPieRef = ref(null);
const effectivenessPieRef = ref(null);

// 初始化柱状图（满意度分布）
const initSatisfactionBar = () => {
  const myChart = echarts.init(satisfactionBarRef.value);
  const option = {
    grid: {
      top: '40%',
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1星', '2星', '3星', '4星', '5星'],
      axisLine: {
        lineStyle: {
          color: '#eee',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: '#eee',
        },
      },
    },
    series: [
      {
        data: [2, 3, 5, 6, 4],
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: '#4895ef',
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };
  myChart.setOption(option);
};

// 初始化柱状图（有效性分布）
const initEffectivenessBar = () => {
  const myChart = echarts.init(effectivenessBarRef.value);
  const option = {
    grid: {
      top: '40%',
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1星', '2星', '3星', '4星', '5星'],
      axisLine: {
        lineStyle: {
          color: '#eee',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: '#eee',
        },
      },
    },
    series: [
      {
        data: [1, 4, 7, 5, 3],
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: '#36cbcb',
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };
  myChart.setOption(option);
};

// 初始化折线图（质量趋势分析）
const initTrendLine = () => {
  const myChart = echarts.init(trendLineRef.value);
  const option = {
    grid: {
      top: '30%',
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['7月', '8月', '9月', '10月'],
      axisLine: {
        lineStyle: {
          color: '#eee',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: '#eee',
        },
      },
    },
    series: [
      {
        name: '满意度',
        data: [3.8, 4.1, 4.3, 4.0],
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#4895ef',
        },
        lineStyle: {
          color: '#4895ef',
        },
      },
      {
        name: '有效性',
        data: [3.5, 3.7, 3.8, 3.6],
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#36cbcb',
        },
        lineStyle: {
          color: '#36cbcb',
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };
  myChart.setOption(option);
};

// 初始化饼图（满意度占比）
const initSatisfactionPie = () => {
  const myChart = echarts.init(satisfactionPieRef.value);
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b} {d}%',
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 10, name: '1星' },
          { value: 15, name: '2星' },
          { value: 25, name: '3星' },
          { value: 30, name: '4星' },
          { value: 20, name: '5星' },
        ],
        itemStyle: {
          colors: ['#66b3ff', '#99ff99', '#ffff99', '#ff9966', '#cc99ff'],
        },
      },
    ],
  };
  myChart.setOption(option);
};

// 初始化饼图（有效性占比）
const initEffectivenessPie = () => {
  const myChart = echarts.init(effectivenessPieRef.value);
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b} {d}%',
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 5, name: '1星' },
          { value: 20, name: '2星' },
          { value: 35, name: '3星' },
          { value: 25, name: '4星' },
          { value: 15, name: '5星' },
        ],
        itemStyle: {
          colors: ['#66b3ff', '#99ff99', '#ffff99', '#ff9966', '#cc99ff'],
        },
      },
    ],
  };
  myChart.setOption(option);
};

onMounted(() => {
  initSatisfactionBar();
  initEffectivenessBar();
  initTrendLine();
  initSatisfactionPie();
  initEffectivenessPie();
});
</script>

<style scoped lang="scss">
.dashboard-container {
  width: 90%;
  max-width: 1400px;
  margin: 30px auto;
}

.custom-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.chart-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 280px;
}
</style>